<template>
  <div class="auton">
    <div class="v_class">
      <!-- 导航条以及外壳 -->
      <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item href="" @click.native="$router.push('/')"
            >首页</a-breadcrumb-item
          >
          <a-breadcrumb-item
            href=""
            @click.native="$router.push('/education/educationHome')"
          >
            教育培训
          </a-breadcrumb-item>
          <a-breadcrumb-item
            href=""
            @click.native="$router.push('/education/oLcurriculumList')"
          >
            在线课程
          </a-breadcrumb-item>
          <a-breadcrumb-item style="color: #ffbe37">课程播放</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="class_autn">
        <div class="video_info">
          <div class="video_box">
            <div class="main_top">
              <div class="side_l">
                <VideoPlayer
                  ref="VideoPlayer"
                  :url="videoUrl"
                  :isPlay="isPlay"
                  :videoTime="videoTime"
                  :courseNo="courseNo"
                  :catalogueCode="catalogueCode"
                  :videoCode="videoCode"
                  :notice="notice"
                  :endid="endid"
                  :nowvideoId="nowvideoId"
                />
              </div>
              <!-- 课程目录右侧按钮 -->
              <!-- <div
          class="side_r"
          v-show="myData.catalogueFlag == 'Y'"
          :class="{ side_r_open: isCatalogueShow }"
        >
         打开按钮 
          <div class="switch_btn" @click="isCatalogueShow = !isCatalogueShow">
            <span
              ><img src="@/assets/image/icon-fanhui.png" alt="" />
              课程目录</span
            >
          </div>
          目录抽屉
          <div class="drawer_box" v-if="myData.catalogueFlag == 'Y'">
            <span class="total">本课程共{{ myData.catalogueNum }}个课时</span>
            <ul class="catalogue_list">
              <li v-for="(item, index) in curriculumList" :key="index">
                <p class="chapter_name" @click.self="cheksilhegiht(index)">
                  {{ item.cataName }}
                  <img
                    @click.self="cheksilhegiht(index)"
                    :src="item.flags ? closeIcon : openIcon"
                    alt=""
                    height="16"
                  />
                </p>
                <div class="section_inner" v-if="item.flags">
                  <div
                    class="section_item"
                    v-for="(sectionItem, sectionIndex) in item.children"
                    :key="sectionIndex"
                  >
                    <p
                      class="section_title"
                      :class="{
                        title_hover: clickIndex == sectionIndex + '-' + index,
                      }"
                      @click.self="
                        clickPlay(
                          sectionIndex,
                          index,
                          sectionItem.filePath,
                          sectionItem.cataNo,
                          sectionItem.pcataNo
                        )
                      "
                    >
                      <img
                        v-show="clickIndex == sectionIndex + '-' + index"
                        src="@/assets/image/icon12.png"
                        alt=""
                      />{{ sectionItem.cataName }}
                    </p>
                    <span class="time"
                      >时长{{ sectionItem.totalDuration }}分钟</span
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div> -->
            </div>
          </div>
        </div>
        <div class="video_introduce">
          <span class="introduce1">{{ myData.name }}</span>
          <div class="introduce_info">
            <span class="money"
              ><i v-show="myData.freeFlag == 'N'">￥</i
              >{{
                myData.freeFlag == "N" && myData.cost
                  ? myData.cost
                  : myData.freeFlag == "Y"
                  ? "免费"
                  : myData.freeFlag == "X"
                  ? "限时免费"
                  : ""
              }}</span
            >
            <div class="label_inner">
              <span>来源：{{ myData.source }}</span>
              <span style="margin-left: 70px"
                >{{ myData.learnNumber }}人已学习</span
              >
            </div>
            <div class="label dlex2-div">
              <div
                class="squareLabel"
                v-for="(item, index) in myData.tagList"
                :key="index + 'tag'"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div>
            <span class="collection" @click="collectFlag(myData.courseNo)">
              <img
                class="icon"
                width="18"
                v-if="myData.collectFlag == '1'"
                src="@/assets/image/icon22.png"
                alt=""
              />
              <a-icon v-else font-size="16px" type="star" />
              {{ myData.collectFlag == 1 ? "已收藏" : "收藏" }}
            </span>
            <!-- <a-button
              v-if="myData.buyFlag == 'N'"
              class="introduce_btn"
              type="primary"
              @click="getJumporder()"
            >
              立即购买
            </a-button>
            <a-button v-else class="introduce_btn" disabled>已购买 </a-button> -->
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="detail_info">
      <div class="dleft">
        <div class="title_inner">
          <span class="title">{{ myData.name }}</span>
        </div>
        <div class="label dlex2-div">
          <div
            class="squareLabel"
            v-for="(item, index) in myData.tagList"
            :key="index + 'tag'"
          >
            {{ item }}
          </div>
        </div>
        <div class="label_inner">
          <span>来源：{{ myData.source }}</span>
          <span>{{ myData.learnNumber }}人已学习</span>
        </div>
        <div class="label_inner">
          <span v-if="myData.policy == 2 && myData.webName" class="policy"
            >相关政策：{{ myData.webName }}</span
          >
          <span v-if="myData.policy != 2 && myData.webName" class="policy"
            >相关政策：
            <a target="_blank" :href="myData.webUrl">{{
              myData.webName
            }}</a></span
          >
        </div>
      </div>

      <div class="lower_corner">
        <span class="collection" @click="collectFlag(myData.courseNo)">
          <img
            class="icon"
            width="18"
            v-if="myData.collectFlag == '1'"
            src="@/assets/image/icon22.png"
            alt=""
          />
          <a-icon v-else font-size="16px" type="star" />
          {{ myData.collectFlag == 1 ? "已收藏" : "收藏" }}
        </span>
        <div class="side_r">
          <span class="money"
            ><i v-show="myData.freeFlag == 'N'">￥</i
            >{{
              myData.freeFlag == "N" && myData.cost
                ? myData.cost
                : myData.freeFlag == "Y"
                ? "免费"
                : myData.freeFlag == "X"
                ? "限时免费"
                : ""
            }}</span
          >
          <div v-if="myData.cvFlag != null">
            <span
              class="apply_btn"
              @click="
                myData.cvFlag == 0 ? onOpen(myData.courseNo, myData.cost) : null
              "
              v-show="myData.cost"
              :class="{ apply_btn_yes: myData.cvFlag }"
              >{{ myData.cvFlag == 0 ? "申请开通" : "已申请" }}</span
            >
          </div>
          <div v-else-if="myData.cost">
            <span
              class="apply_btn"
              @click="onOpen(myData.courseNo, myData.cost)"
              :class="{ apply_btn_yes: myData.cvFlag }"
              >{{ "申请开通" }}</span
            >
          </div>
        </div>
      </div>
    </div> -->
    <div class="conder">
      <div class="coleft">
        <a-tabs default-active-key="1" @change="callback" size="large">
          <a-tab-pane key="1" tab="课程介绍">
            <div class="introduction" v-html="myData.detail"></div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="课程目录" v-if="myData.catalogueFlag == 'Y'">
            <div class="mulu">
              <div
                class="greyDiv"
                v-for="(item, index) in curriculumList"
                :key="index + 'ol'"
                id="wrapper"
              >
                <!-- 第一层 -->
                <div class="cOicon-id">
                  <span class="titleTxt5" @click.self="cheksilhegiht(index)">{{
                    item.cataName
                  }}</span>
                  <img
                    v-show="item.flags"
                    class="imgagesTwo"
                    src="@/assets/image/icon10.png"
                    @click.self="cheksilhegiht(index)"
                    alt=""
                  />
                  <img
                    v-show="!item.flags"
                    class="imgagesTwo"
                    @click.self="cheksilhegiht(index)"
                    src="@/assets/image/icon11.png"
                    alt=""
                  />
                </div>
                <div v-show="item.flags" class="trDiv fadelogIn">
                  <ul>
                    <li v-for="(iotm, index2) in item.children" :key="index2">
                      <p
                        :class="{
                          title_hover: clickIndex == index2 + '-' + index,
                        }"
                        @click.self="
                          clickPlay(
                            index2,
                            index,
                            iotm.filePath,
                            iotm.cataNo,
                            iotm.pcataNo
                          )
                        "
                      >
                        <img
                          v-show="clickIndex == index2 + '-' + index"
                          src="@/assets/image/icon12.png"
                          alt=""
                        />
                        {{ iotm.cataName }}
                      </p>
                      <p>本节时长：{{ iotm.totalDuration }}</p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <!-- 讲师介绍先隐藏 -->
          <a-tab-pane key="3" tab="讲师介绍" v-if="0">
            <div class="mySwiper dlex3-div">
              <!-- 竖向轮播图实现 -->
              <div class="verticalSp">
                <div class="image6" @click="swprIndexs(-1)">
                  <img
                    width="20"
                    height="9"
                    src="@/assets/image/icon20.png"
                    alt=""
                  />
                </div>
                <!-- 最外层盒子保证不会溢出 -->
                <div class="swDiv">
                  <!-- 内层超长盒子 -->
                  <div
                    class="longDiv"
                    :style="{ marginTop: '-' + 73 * swiperIndex + 'px' }"
                  >
                    <!-- 内层循环的图片 -->
                    <div
                      class="image5"
                      :class="{ selBorder: selborImdex == index }"
                      @click="indexsSwpr(index)"
                      v-for="(vname, index) in Teacherdata"
                      :key="index"
                    >
                      <img :src="imageWebUrl + vname.photo" alt="" />
                    </div>
                  </div>
                </div>
                <div class="image6" @click="swprIndexs(1)">
                  <img
                    width="20"
                    height="9"
                    src="@/assets/image/icon21.png"
                    alt=""
                  />
                </div>
              </div>
              <!-- 右侧展示人物信息 -->
              <div style="margin-left: 18px">
                <!-- 外层循环盒子，保证不会让内容溢出，内层采用v-show来控制显示隐藏，添加淡入淡出效果 -->
                <div
                  class="wrapper"
                  v-for="(vname, index) in Teacherdata"
                  :key="index"
                  v-show="index == selborImdex"
                >
                  <div class="dlex2-div">
                    <div>
                      <img
                        width="206"
                        height="255"
                        :src="imageWebUrl + vname.photo"
                        alt=""
                      />
                    </div>
                    <div style="margin-left: 40px">
                      <div style="margin-bottom: 8px">
                        <span class="nameTxt1">{{ vname.name }}</span>
                        <!-- <span class="nameTxt2" style="margin-left: 16px"
                          >zhangsan</span
                        > -->
                      </div>
                      <p class="titleTxt5">{{ vname.briefDesc }}</p>
                    </div>
                  </div>
                  <div style="margin-top: 24px">
                    <span class="shuming">其他课程：</span>

                    <span v-for="(item, i) in vname.courseList" :key="i">
                      <span
                        class="shuming"
                        style="text-decoration: underline; margin-left: 8px"
                        >{{ item.name }}</span
                      >
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="coright">
        <div class="peach">
          <!-- <div class="cOicon-id">
            <img class="imgagesTwo" src="@/assets/image/icon9.png" alt="" />
            <p style="font-weight: 600">同讲师课程</p>
          </div>
          <div
            class="peopleimg"
            v-for="(item, i) in tCurriculumlist"
            :key="i + 'okfs'"
          >
            <div class="image1">
              <img :src="imageWebUrl + item.clecturerPhoto" alt="" />
            </div>
            <div style="margin-left: 16px">
              <div class="txt3">
                <div class="cOicon-id">
                  <img
                    class="imgagesTwo"
                    src="@/assets/image/icon7.png"
                    alt=""
                  />
                  <p class="lineSingle" style="font-weight: 600; width: 157px">
                    {{ item.courseName }}
                  </p>
                </div>
                <p
                  class="smallPrint"
                  style="color: #999999; text-align: right; margin-top: 11px"
                >
                  {{ item.learnNumber }}人已学
                </p>
              </div>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 68px auto"
            v-if="tCurriculumlist.length < 1"
          /> -->
          <div class="cOicon-id">
            <img class="imgagesTwo" src="@/assets/image/icon8.png" alt="" />
            <p style="font-weight: 600">您可能感兴趣的课程</p>
          </div>
          <!-- 推荐的课程列表 -->
          <div
            class="serdiv"
            v-for="(isem, icon) in similarCurriculum"
            :key="icon"
            @click="getJumpVideo(isem)"
          >
            <div class="dlex3-div">
              <div class="image4">
                <img :src="imageWebUrl + isem.cover" alt="" />
              </div>
              <div style="margin-left: 16px">
                <span
                  class="describe lineSingle"
                  style="margin-top: 3px; display: block; width: 180px"
                  >{{ isem.name }}</span
                >
                <div style="margin-top: 8px" class="dlex2-div">
                  <span class="smallPrint">{{ isem.learnNumber }}人已学习</span>
                </div>
                <div style="margin-top: 8px" class="dlex2-div">
                  <span class="redTxt" v-if="myData.freeFlag == 'N'">
                    <p class="redTxt">￥</p>
                    {{ isem.cost }}
                  </span>
                  <span class="redTxt" v-if="myData.freeFlag == 'X'"
                    >限时免费</span
                  >
                  <span class="redTxt" v-if="myData.freeFlag == 'Y'">免费</span>
                </div>
              </div>
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
              height: '220px',
            }"
            style="margin: 0 auto; padding: 68px 0"
            v-if="similarCurriculum.length < 1"
          />
        </div>
      </div>
    </div>
    <Login ref="login" />
    <!--    <Loading v-show="onLoading"></Loading>-->
  </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";
import openIcon from "@/assets/image/openIcon.png";
import Login from "@/components/popup/login/index.vue";
import closeIcon from "@/assets/image/closeIcon.png";
import { Modal } from "ant-design-vue";
export default {
  components: {
    VideoPlayer,
    Login,
  },
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      videoUrl: "",
      isPlay: "1", // 0 进度和倍速禁用 1 可用
      videoTime: null, //视频时常
      // 是否生成证书,传3个值，当前播放的视频的目录对应id和目录下最后一条的id，再传相对应课程的id
      notice: "",
      endid: "",
      nowvideoId: "",

      openIcon,
      closeIcon,
      isCatalogueShow: true, //课程目录显示隐藏
      clickIndex: "0-0",
      curriculumList: [],
      // 我的视频数据
      myData: {},
      // 该课程讲师
      Teacherdata: [],
      // 同讲师课程
      tCurriculumlist: [],
      // 同类型的课程
      similarCurriculum: [],

      // 查询出课程的详情
      swiperIndex: 0,
      selborImdex: 0,
      courseNo: this.$route.query.courseNo,
      userNo: null, //用户编码
      catalogueCode: null, //章节编码
      videoCode: null, //视频编码
      onLoading: false,
    };
  },
  methods: {
    callback(key) {
      return key;
      console.log(key);
    },
    // 跳转订单购买页
    getJumporder(e) {
      if (!this.$store.state.token) {
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        this.$refs["login"].visible = true;
        return;
      }
      this.$router.push("/order?courseNo=" + this.courseNo);
    },
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
      location.reload();
    },
    // 登录弹框
    // 收藏功能
    collectFlag(e) {
      if (!this.$store.state.token) {
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        this.$refs["login"].visible = true;
        return;
      }
      if (!e) {
        this.$message.warning("数据异常");
        return;
      }
      this.myData.collectFlag = this.myData.collectFlag == 0 ? 1 : 0;
      this.$ajax({
        url: "/user/usercollect/save",
        method: "post",
        params: {
          collectType: 1,
          collectCode: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.selMydata(e);
          // location.reload();
        }
      });
    },
    // 申请开通
    onOpen(courseNo, cost) {
      if (!this.$store.state.token) {
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        this.$refs["login"].visible = true;
        return;
      }
      let self = this;
      this.$confirm({
        title: "提示信息",
        content: "您观看的课程为收费课程，申请后可继续观看",
        okText: "申请开通",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          self.$confirm({
            title: "提示信息",
            content:
              "当前课程价格为" +
              cost +
              "元，若您确认申开通，工作人员将于3个工作日内与您联系。",
            okText: "确认申请",
            okType: "danger",
            cancelText: "取消",
            onOk() {
              self
                .$ajax({
                  url: "/educational/courauthor/save",
                  method: "post",
                  params: {
                    courseNo: courseNo,
                  },
                })
                .then((res) => {
                  if (res.code == 200) {
                    self.selMydata(courseNo);
                    location.reload();
                  }
                });
            },
            onCancel() {
              // console.log("Cancel");
            },
          });
        },
        onCancel() {
          // console.log("Cancel");
        },
      });
    },
    // 查询课程详情
    selMydata(e) {
      this.onLoading = true;
      this.$ajax({
        url: "/educational/courseinfo/get/detail?courseNo=" + e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          this.myData = res.data;
          this.curriculumList = this.myData.catalogue;
          this.notice = res.data.courseNo;
          // 取最后
          this.selRecursion(this.curriculumList);
          if (this.myData.catalogueFlag == "Y") {
            this.curriculumList.forEach((item, index) => {
              this.$set(item, "flags", false);
            });
            if (this.$route.query.my == "1") {
              if (res.data.courseNo === this.$route.query.courseNo) {
                res.data.catalogue.forEach((itme, index) => {
                  itme.children.forEach((children, childrenIndex) => {
                    if (children.cataNo === this.$route.query.videoCode) {
                      this.videoUrl = this.imageWebUrl + children.filePath;
                      setTimeout(function () {
                        sessionStorage.setItem("cataNo", children.cataNo);
                        sessionStorage.setItem("pcataNo", children.pcataNo);
                      }, 1000);
                      this.clickIndex = index + "-" + childrenIndex;
                      this.curriculumList[index].flags = true;
                    }
                  });
                });
              }
              this.curriculumList[0].flags = true;
            } else {
              this.videoUrl =
                this.imageWebUrl + res.data.catalogue[0].children[0].filePath;
              this.catalogueCode = this.curriculumList[0].children[0].cataNo;
              this.videoCode = this.curriculumList[0].children[0].pcataNo;
              this.curriculumList[0].flags = true;
            }
          } else {
            this.videoUrl = this.imageWebUrl + this.curriculumList.filePath;
            this.catalogueCode = this.curriculumList.cataNo;
            // this.videoCode = this.curriculumList[0].children[0].pcataNo;
          }

          sessionStorage.setItem("cataNo", this.catalogueCode);
          sessionStorage.setItem("pcataNo", this.videoCode);
          this.$refs.VideoPlayer.time = "";
          // console.log(this.$refs.VideoPlayer.time, "头疼");
          // console.log(this.videoUrl, "无语");
        } else {
          this.onLoading = false;
        }
      });
    },
    // 查询课程讲师详情
    selTeacherdata(e) {
      this.$ajax({
        url: "/educational/lecturerinfo/list/lecturer/course?courseNo=" + e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.Teacherdata = res.data;
        } else {
        }
      });
    },
    // 查询同讲师课程
    selTidentical(e) {
      this.$ajax({
        url: "/educational/courseinfo/list/course/lecturer/same?courseNo=" + e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.tCurriculumlist = res.data;
        } else {
        }
      });
    },
    // 查询同类型课程
    selCurriculum(e) {
      this.$ajax({
        url: "/educational/courseinfo/list/course/type/same?courseNo=" + e,
        method: "post",
        params: {},
      }).then((res) => {
        if (res.code == 200) {
          this.similarCurriculum = res.data;
        } else {
        }
      });
    },

    // 目录展开收起
    cheksilhegiht(e) {
      this.selRecursion(this.curriculumList);
      let olpn = "";
      olpn = this.curriculumList[e].flags;
      if (olpn) {
        this.curriculumList[e].flags = false;
        // console.log(1);
      } else {
        this.curriculumList[e].flags = true;
        // console.log(2);
      }
    },
    // 轮播上下滑动
    swprIndexs(e) {
      this.swiperIndex += e;
      switch (this.swiperIndex) {
        case -1:
          this.swiperIndex = this.Teacherdata.length - 1;
          break;
        case this.Teacherdata.length:
          this.swiperIndex = 0;
          break;
        default:
          break;
      }
    },
    // 取最后一条视频的id
    selRecursion(e) {
      for (let index = 0; index < e.length; index++) {
        if (e[index].children) {
          this.selRecursion(e[index].children);
        } else {
          if (this.nowvideoId == "") {
            this.nowvideoId = e[index].cataNo;
          }
          this.endid = e[index].cataNo;
        }
      }
    },
    //图片选中e
    indexsSwpr(e) {
      this.swiperIndex = e;
      this.selborImdex = e;
    },
    //课程播放
    clickPlay(sectionIndex, index, filePath, cataNo, pcataNo) {
      this.nowvideoId = cataNo;

      this.clickIndex = sectionIndex + "-" + index;
      this.videoUrl = this.imageWebUrl + filePath;
      setTimeout(function () {
        sessionStorage.setItem("cataNo", cataNo);
        sessionStorage.setItem("pcataNo", pcataNo);
      }, 1000);
      this.$refs.VideoPlayer.time = "";
      // console.log(this.catalogueCode, this.videoCode, "无语");
    },
  },
  created() {
    window.parentMounted = this._isMounted;
    this.selMydata(this.$route.query.courseNo);
    this.selTeacherdata(this.$route.query.courseNo);
    this.selTidentical(this.$route.query.courseNo);
    this.selCurriculum(this.$route.query.courseNo);
  },
  beforeMount() {
    window.parentMounted = this._isMounted; // _isMounted是当前实例mouned()是否执行 此时为false
  },
};
</script>

<style lang="less" scoped>
// 新样式12.15修改
.v_class {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 80px;
  .class_autn {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .video_introduce {
      width: 586px;
      overflow: hidden;
      margin-left: 40px;
      // background-color: #ca0000;
      .introduce1 {
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 700;
        color: #000000;
        line-height: 45px;
      }
      .introduce_btn {
        margin-left: 72px;
        width: 120px;
        height: 40px;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #232d32;
        line-height: 20px;
        img {
          width: 16px;
          margin-right: 4px;
        }
      }
      .introduce_info {
        width: 586px;
        height: 169px;
        background: #f8f8f8;
        margin: 24px 0;
        padding: 24px;
        .label_inner {
          margin-top: 16px;
          display: flex;
          span {
            display: block;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 21px;
          }
        }
      }
    }
  }
}

.money {
  font-size: 24px;
  color: #ca0000;
  i {
    font-size: 18px;
    font-style: normal;
  }
}
.collection {
  display: inline-block;
  cursor: pointer;
}
.redTxt {
  display: flex;
  align-items: center;
  font-size: 15px;
}
// .video_info{
//  width: 574px;
//  min-height: 324px;
//  background-color: rgb(226, 26, 26);
//  position: relative;
// }
.video_box {
  color: #fff;
  overflow: hidden;
  width: 574px;
  // height: 324px;
  background-color: #000000;
  padding: 10px;
  .main_top {
    display: flex;
  }
  .side_l {
    flex: 1;
    // min-height: 616px;
    //height: 600px;
    display: flex;
    align-items: center;
    /deep/ .xgplayer-skin-custom {
      width: 100% !important;
      height: 100% !important;
    }
    /deep/ .vcp-player {
      width: 100% !important;
      height: auto !important;
    }
    /deep/ video {
      width: 100% !important;
      height: 100% !important;
    }
  }
  .side_r {
    position: relative;
    width: 330px;
    padding: 80px 10px;
    padding-right: 0;
    transition: all 0.5s;
    display: flex;
    left: 10px;
    .switch_btn {
      color: #ffffff;
      width: 32px;
      height: 100%;
      display: flex;
      align-items: center;
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        display: inline-block;
        background: #333333;
        border-radius: 12px 0px 0px 12px;
        padding: 25px 10px;
        width: 32px;
        height: 127px;
        font-size: 12px;
        line-height: 16px;
        cursor: pointer;
        img {
          position: relative;
          right: 2px;
        }
      }
    }
    .drawer_box {
      flex: 1;
      min-width: 260px;
      padding-left: 22px;
      max-height: 480px;
      padding-right: 10px;
      overflow: auto;
      background: #333333;
      padding: 24px 27px;
      padding-right: 10px;
      .total {
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
      }
      .catalogue_list {
        margin-top: 16px;
        li {
          //margin-bottom: 10px;
          padding: 10px 0;
        }
        .chapter_name {
          font-size: 14px;
          display: flex;
          line-height: 20px;
          color: #eee;
          justify-content: space-between;
          cursor: pointer;
          img {
            cursor: pointer;
          }
        }
        .section_inner {
          padding-left: 16px;
          margin-bottom: 15px;
          .section_item {
            margin-top: 15px;
            color: #999999;
            .section_title {
              font-size: 14px;
              line-height: 18px;
              margin-bottom: 5px;
              cursor: pointer;
              img {
                position: relative;
                top: -2px;
                width: 12px;
                margin-right: 5px;
              }
            }
            .title_hover {
              color: #ffbe37;
            }
            .time {
              font-size: 12px;
            }
          }
        }
      }
    }
    /*滚动条样式*/
    .drawer_box::-webkit-scrollbar {
      width: 4px;
      /*height: 4px;*/
    }
    .drawer_box::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(153, 153, 153, 0.2);
      background: rgba(153, 153, 153, 0.2);
    }
    .drawer_box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(180, 21, 21, 0.1);
    }
  }
  .side_r_open {
    width: 42px;
    transition: all 0.5s;
    .drawer_box {
    }
  }
}

.label {
  margin-top: 16px;
}
.titlenav {
  width: 80px;
}
.detail_info {
  position: relative;
  width: 1200px;
  height: 164px;
  margin: 20px auto 0;
  background: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  .title_inner {
    display: flex;
    align-items: center;
    .title {
      font-size: 24px;
      font-weight: 400;
      color: #000;
      line-height: 33px;
    }
  }

  .dleft {
    flex: 1;
  }
  .lower_corner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;

    .side_r {
      width: 155px;
      text-align: center;

      .apply_btn {
        margin-top: 16px;
        display: inline-block;
        text-align: center;
        width: 150px;
        height: 40px;
        line-height: 40px;
        background: #ffbe37;
        border-radius: 4px;
        font-size: 18px;
        font-weight: 500;
        color: #232d32;
        cursor: pointer;
      }
      .apply_btn_yes {
        background: #999999;
      }
    }
  }
}
.conder {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
  padding-bottom: 50px;
  .coleft {
    width: 840px;
    padding: 33px 32px;
    background-color: #ffffff;
    .image2 {
      margin-top: 30px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .coright {
    width: 340px;
    margin-left: 20px;
    .cOicon-id {
      background-color: #232d32;
      padding: 16px 11px;
      p {
        color: #ffffff;
      }
    }
    .peach {
      background-color: #ffffff;
    }
    .peopleimg {
      width: 100%;
      display: flex;
      padding: 25px 16px;
      border-bottom: #eeeeee solid 1px;
      .image1 {
        width: 109px;
        height: 132px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .txt3 {
        padding: 9px 0px;
        border-top: #eeeeee solid 1px;
        cursor: pointer;
      }
      .txt3:nth-child(1) {
        padding-top: 0px !important;
        border-top: #ffffff solid 1px !important;
      }
    }
    .peopleimg:nth-child(1) {
      padding-top: 8px;
    }
  }
}
.infoBox1 {
  font-size: 16px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dVul1 {
  margin-left: 30px;
  overflow: hidden;
  ul {
    li {
      list-style: none;
      font-size: 16px;
      color: #666666;
      font-family: "苹方-简";
      line-height: 28px;
    }
  }
}
.image4 {
  width: 112px;
  height: 77px;
  img {
    width: 100%;
    height: 100%;
  }
}
.serdiv {
  border-bottom: 1px solid #eeeeee;
  padding: 20px 16px;
}
.mulu {
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.greyDiv {
  //width: 531px;
  padding: 15px;
  background-color: #f8f8f8;
  overflow: hidden;
  margin: 18px 0px;
  //-moz-transition: all ease 0.5s;
  //-o-transition: all ease 0.5s;
  //transition: all ease 0.5s;
}
.trDiv {
  //-moz-transition: all ease 0.5s;
  //-o-transition: all ease 0.5s;
  //transition: all ease 0.5s;
  //overflow: hidden;
  padding: 0px 24px;
  cursor: pointer;
  ul {
    li {
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 21px;
      cursor: pointer;
      padding: 10px 0;
      .title_hover {
        color: #ffbe37;
      }
      img {
        width: 12px;
        height: 14px;
        margin-right: 8px;
        //display: none;
      }
    }
    li:hover {
      img {
        //display: inline-block;
      }
    }
  }
}
.imgagesTwo {
  cursor: pointer;
}
.titleTxt5 {
  cursor: pointer;
}
.shuming {
  font-size: 16px;
  font-family: PingFang SC;
  color: #333333;
  cursor: pointer;
}
.image6 {
  text-align: center;
  margin: 8px;
  cursor: pointer;
}
// 竖向轮播图区样式
.mySwiper {
  width: 100%;
  padding: 24px;
  background-color: #f8f8f8;
  .swDiv {
    width: 114px;
    height: 267px;
    overflow: hidden;
    .longDiv {
      width: 100%;
      height: 99999px;
      transition: all 1s;
    }
  }
  .image5 {
    width: 112px;
    height: 73px;
    margin: 0 auto;
    border-radius: 4px;
    margin-top: 8px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
  }
  .image5:nth-child(1) {
    margin-top: 0px;
  }
}
//轮播图片选中样式
.selBorder {
  border: #fb6d00 solid 1px;
}
.describe {
  font-weight: 600;
}
// 设置动画
// 淡入淡出
@keyframes fade-in {
  0% {
    opacity: 0;
  } /*初始状态 透明度为0*/
  40% {
    opacity: 0;
  } /*过渡状态 透明度为0*/
  100% {
    opacity: 1;
  } /*结束状态 透明度为1*/
}
@-webkit-keyframes fade-in {
  /*针对webkit内核*/
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#wrapper {
  animation: fade-in; /*动画名称*/
  animation-duration: 1.5s; /*动画持续时间*/
  -webkit-animation: fade-in 1.5s; /*针对webkit内核*/
}
/*弹层动画（从下往上）*/
.fadelogIn {
  -webkit-animation: fadelogInDown 0.3s;
  animation: fadelogInDown 0.3s;
}

@keyframes fadelogInDown {
  0% {
    -webkit-transform: translate3d(0, -20%, 0);
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@-webkit-keyframes fadelogInDown {
  0% {
    -webkit-transform: translate3d(0, -20%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: none;
    opacity: 1;
  }
}
</style>
